
<template>
    <div class="inviteHasStudentBox">
        <!-- 搜索栏 start-->
        <div class="invite-sub">
            <img class="invite-logo" src="../../static/image/icon-title.png" alt="">
            <span class="inviteSearch">
              <input type="text" placeholder="搜索">
                <img src="../../static/image/sousuo.png" alt="">
            </span>
        </div>
        <!-- 搜索栏 end-->
        <!-- 导航跳转栏 start-->
        <adminHeader></adminHeader>
        <!-- 导航跳转栏 end-->
        <!-- 邀请已有学员 start-->
        <div class="inviteTable">
                <table>
                    <thead>
                        <tr>
                            <th class="tableOne">
                                <input type="checkbox" label="全选" name="type" v-model="isCheckAll" @change="checkedAll">
                            </th>
                            <th class="tableTwo">头像</th>
                            <th class="tableThree">姓名</th>
                            <th class="tableFour">手机</th>
                            <th class="tableFive">性别</th>
                            <th class="tableSix">子公司/部门</th>
                            <th class="tableSeven">职位</th>
                            <th class="tableEight">创建时间</th>
                            <th class="tableNine"><el-button class="addInvite" type="text"><img src="../../static/image/chuangjian.png" alt="">加入</el-button></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="inviteList in inviteLists" :key='inviteList.id'>
                            <td>
                                <input type="checkbox" :value='inviteList.id' v-model="checkedLists">
                            </td>
                            <td><img :src="inviteList.headImg" alt=""></td>
                            <td>{{inviteList.name}}</td>
                            <td>{{inviteList.phone}}</td>
                            <td>{{inviteList.sex}}</td>
                            <td>{{inviteList.subsidiary}}</td>
                            <td>{{inviteList.position}}</td>
                            <td>{{inviteList.time}}</td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
                <!-- page -->
                <el-pagination background layout="prev, pager, next" :total="50"></el-pagination>
                <!-- page end-->
            </div>
        <!-- 邀请已有学员 end-->
    </div>
</template>
<script>
    // 引用 nav 组件 
    import adminHeader from '../components/adminHeader.vue';
    export default {
        components:{
            adminHeader:adminHeader
        },
        data() {
            return {
                // 是否全选
                isCheckAll:false,
                // 单选全选v-model值
                checkedLists:[],
                inviteLists:[
                    {
                        id:'1',
                        headImg:'../../static/image/morentuxiang.png',
                        name:'稳如兰',
                        phone:'12343234422',
                        sex:'女',
                        subsidiary:'子公司',
                        position:'经理',
                        time:'2018/08/09',
                    },
                    {
                        id:'2',
                        headImg:'../../static/image/morentuxiang.png',
                        name:'稳如兰',
                        phone:'12343234422',
                        sex:'女',
                        subsidiary:'子公司',
                        position:'经理',
                        time:'2018/08/09',
                    },
                    {
                        id:'3',
                        headImg:'../../static/image/morentuxiang.png',
                        name:'稳如兰',
                        phone:'12343234422',
                        sex:'女',
                        subsidiary:'子公司',
                        position:'经理',
                        time:'2018/08/09',
                    },
                ],
            };
        },
        methods: {
             //全选单选
            checkedAll () {
                // 判断 全选/反选 是否点击
                if (this.isCheckAll) {
                    let arr = []
                    // 循环全部数据并push到一个数组中
                    this.inviteLists.forEach(element => {
                        arr.push(element.id)
                    });
                    // 选中列表赋值，此时的arr已经是全部数据了，直接赋值就等于选中所有checkbox
                    this.checkedLists = arr
                } else {
                    // 如果 全选/反选 为假，则选中列表初始化
                    this.checkedLists = []
                }
            },
        },
        watch: {
            // 监听选中列表属性，当选中列表发生变化时，会运行此方法
            checkedLists (newValue, oldValue) {
                // 每次运行时，判断当前选中列表中的数组个数是否等于全部数据的数组个数，如果到某一时刻全等，则全选按钮为选中
                if (newValue.length === this.inviteLists.length) {
                    this.isCheckAll = true
                } else {
                    // 否则为取消
                    this.isCheckAll = false
                }
            }
        },  
        computed: {

        },
        created() {

        },
        mounted() {
            
        }
    };
</script>
